<template>
  <div class="letters">
    <div class="content" @click="turnToNews">
				<span class="news">快报</span>
      <span >
        {{msg}}
      </span>
    </div>
  </div>
</template>

<script>
import Data from '@/server/server.js'
export default {
  data () {
    return {
      letters:[],
      msg:''
    }
  },
  methods: {
    change () {
			const len=this.letters.length;
			var i=0;
			if(len>0){
					this.msg=this.letters[i].msg
		      setInterval( () => {
		      	this.msg=this.letters[i].msg
		      	i++;
		      	i=(i>len-1)?0:i++;
		      }, 2000)
			}
   },
   turnToNews(){
   	this.$router.push('news');
   }
  },
  mounted () {
    Data.letters.then(data => {
  		this.letters=data;
  		this.change()
  	})
  }
}
</script>

<style scoped="scoped">
.letters {
  width: 100%;
  height: 3rem;
  background: #f0f0f0;
  font-size: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.letters .content {
  width: 95%;
  height: 1.9rem;
  background: white;
  border-radius: 5rem;
  line-height: 1.9rem;
  overflow: hidden;
}
.news{background:red;padding:2px 5px; color: white;margin-left: 5%;margin-right: 2%;}
.letters .content span {
  opacity: 0.6;
}
</style>